<!-- 问题反馈 -->
<template>
	<u-form :model="model" ref="uForm">
		<view class="feedback-wrap u-p-30">
			<view class="form-item">
				<label>
					<view class="inp-title">开户行名称</view>
					<input class="inp" v-model="model.bank_name" name="bank_name" type="text" placeholder="请填写开户行名称" placeholder-class="pl-style" />
				</label>
			</view>
			<view class="form-item">
				<label>
					<view class="inp-title">持卡人</view>
					<input class="inp" v-model="model.collection_name" name="collection_name" type="text" placeholder="请填写持卡人" placeholder-class="pl-style" />
				</label>
			</view>
			<view class="form-item">
				<label>
					<view class="inp-title">银行卡号</view>
					<input class="inp" v-model="model.card_num" name="card_num" type="number" placeholder="请填写银行卡号" placeholder-class="pl-style" />
				</label>
			</view>
			<view class="form-item">
				<label>
					<view class="inp-title">预留手机号</view>
					<input class="inp" v-model="model.open_account_mobile" name="open_account_mobile" type="number" placeholder="请输入您的联系电话" placeholder-class="pl-style" />
				</label>
			</view>
			
			<view class="form-item">
				<label>
					<view class="inp-title">微信收款码</view>
					<view class="area-box">
						
						<view class="img-box">
							<u-upload
								:showProgress="false"
								@on-uploaded="uploadSuccess"
								@on-remove="uploadRemove"
								ref="uUpload"
								:action="`${$API_URL}index/upload`"
								width="140"
								height="140"
								maxCount="1"
							></u-upload>
						</view>
					</view>
				</label>
			</view>

			<!-- 底部按钮 -->
			<view class="foot_box u-flex u-row-between u-col-center">
				<button class="u-reset-button post-btn" @tap="addFeedback">提交</button>
				<!-- <button class="u-reset-button contact-btn" @tap="onService">联系客服</button> -->
			</view>
			
			
		</view>
	</u-form>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
export default {
	
	components: {},
	data() {
		return {
			model: {
				bank_name:'',
				card_num: '',
				collection_name: '',
				open_account_mobile: '',
				wx_qrcode: ''
			},
			labelStyle: {
				'font-size': '30rpx',
				'font-weight': '600',
				color: '#333'
			},
			imgList: [], //图片
			typeList: [] //类型列表
		};
	},
	computed: {
		...mapState({
			userInfo: ({
				user
			}) => user.userInfo,
			authType: ({
				user
			}) => user.authType
		})
	},
	onLoad() {
		// this.getFeedbackType();
		var userData                   = JSON.parse(JSON.stringify(this.userInfo));
		this.model.bank_name           = userData.bank_name
		this.model.card_num            = userData.card_num
		this.model.collection_name     = userData.collection_name
		this.model.open_account_mobile = userData.open_account_mobile
		this.model.wx_qrcode           = userData.wx_qrcode
		
		// 得到整个组件对象，内部图片列表变量为"lists" 
		this.$nextTick(()=>{
			if(this.model.wx_qrcode){
				this.$refs.uUpload.lists  = [{'url':this.model.wx_qrcode}];
			}
			
		})
		
		
	},
	methods: {
		...mapActions(['getUserInfo']),
		// 上传图片成功
		uploadSuccess(e) {
			e.forEach(item => {
				this.model.wx_qrcode = item.response.data.url;
			});
		},

		// 移除图片
		uploadRemove(index) {
			this.model.wx_qrcode = '';
		},

		// 提交意见
		addFeedback() {
			let that = this;
			that.$http('user.collection', that.model, '提交中...').then(res => {
				uni.hideKeyboard();
				if (res.code === 1) {
					that.$u.toast('提交成功');
					that.$Router.back();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.feedback-wrap {
	background: #fff;
}

.form-item {
	margin-top: 30rpx;
	.inp-title {
		font-size: 30rpx;

		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		align-items: center;
		margin-bottom: 30rpx;
	}
	.inp {
		width: 690rpx;
		height: 84rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		padding: 0 30rpx;
		font-size: 26rpx;

		font-weight: 500;
		color: #333;
		margin-bottom: 38rpx;
	}
	.area-inp {
		height: 190upx;
		padding: 30rpx;
	}
	.pl-style {
		font-size: 26rpx;

		color: rgba(177, 179, 199, 1);
	}
}
.area-box {
	width: 690rpx;
	min-height: 306rpx;
	background: rgba(249, 250, 251, 1);
	border-radius: 20rpx;
	padding: 20rpx;
	.pl-style {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(177, 179, 199, 1);
		line-height: 50rpx;
	}
	.inp-area {
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
		line-height: 50rpx;
		width: 100%;
	}
	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
}

// 底部按钮
.foot_box {
	height: 100rpx;
	width: 100%;
	margin-top: 100rpx;
	.contact-btn {
		width: 340rpx;
		line-height: 74rpx;
		background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
		box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
		border-radius: 35rpx;
		font-size: 28rpx;

		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
	.post-btn {
		width: 100%;
		line-height: 74rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0rpx rgba(229, 138, 0, 0.22);
		border-radius: 37rpx;
		font-size: 28rpx;

		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
}
</style>
